<template>
  <el-scrollbar ref="scrollbar"
                :class="classList"
                :style="styleList"
                :view-class="viewClass"
                :view-style="viewStyle"
                :wrap-class="wrapClass"
                :wrap-style="wrapStyle">
    <slot></slot>
  </el-scrollbar>
</template>

<script lang="ts">
  import { Component, Vue, Prop } from "@some21/vue-class-decorator";
  import Color from "color";

  @Component({ name: "JuScrollbar" })
  export default class extends Vue {
    $refs!: {
      scrollbar: any;
    };
    get classList() {
      const classList = [this.$style.juScrollbar];

      if (this.isHorizontal) {
        classList.push("is-horizontal");
      }

      return classList;
    }
    get styleList() {
      const styles: any = {};
      if (this.barColor) {
        const color = Color(this.barColor);
        styles["--ju-scrollbar-color"] = color.rgb().array().join();
      }
      if (this.shadowColor) {
        styles["--ju-scrollbar-hover-shadow-color"] = this.shadowColor;
      }

      return styles;
    }

    @Prop({ type: Boolean, default: false })
    isHorizontal!: boolean;
    @Prop({ type: String, default: null })
    barColor!: string;
    @Prop({ type: String, default: null })
    shadowColor!: string;

    @Prop({ type: [String, Array], default: null })
    viewClass!: string | any[];
    @Prop({ type: [String, Object], default: null })
    viewStyle!: string | object;
    @Prop({ type: [String, Array], default: null })
    wrapClass!: string | any[];
    @Prop({ type: [String, Object], default: null })
    wrapStyle!: string | object;

    resizeTimer: ReturnType<typeof setTimeout>;
    winResize() {
      if (this.resizeTimer) {
        clearTimeout(this.resizeTimer);
      }
      this.resizeTimer = setTimeout(() => {
        const resizeHeight = this.$refs.scrollbar.$refs.resize.clientHeight;
        const wrapHeight = this.$refs.scrollbar.$refs.wrap.clientHeight;
        const resizeWidth = this.$refs.scrollbar.$refs.resize.clientWidth;
        const wrapWidth = this.$refs.scrollbar.$refs.wrap.clientWidth;

        // 设定滚动条高度
        if (resizeHeight <= wrapHeight) {
          this.$refs.scrollbar.sizeHeight = "";
        } else {
          this.$refs.scrollbar.sizeHeight = `${(100 * wrapHeight) / resizeHeight}%`;
        }

        // 设定滚动条宽度
        if (resizeWidth <= wrapWidth) {
          this.$refs.scrollbar.sizeWidth = "";
        } else {
          this.$refs.scrollbar.sizeWidth = `${(100 * wrapWidth) / resizeWidth}%`;
        }
      }, 50);
    }

    beforeMount() {
      window.addEventListener("resize", this.winResize);
    }

    beforeDestroy() {
      window.removeEventListener("resize", this.winResize);
    }
  }
</script>

<style lang="scss" module>
  .ju-scrollbar {
    --ju-scrollbar-color: 0, 0, 0;
    height: 100%;
    :global {
      // 滑块样式
      .el-scrollbar__thumb {
        border-radius: 50em;
        background-color: rgba(var(--ju-scrollbar-color), 0.3);
        box-shadow: 0 0 8px rgba(200, 200, 200, 0.7) inset;
        transition: width 0.15s ease-in-out, height 0.15s ease-in-out;

        &:hover {
          background-color: rgba(var(--ju-scrollbar-color), 1);
        }
      }
      // .el-scrollbar__view {
      //   padding-bottom: 10px;
      // }
      .el-scrollbar__bar.is-vertical {
        width: 5px;
      }
      .el-scrollbar__bar.is-horizontal {
        height: 5px;
      }
      .el-scrollbar__wrap {
        overflow-x: hidden;
        transition: all 0.15s ease-in-out;
      }
    }
    &:hover {
      :global {
        .el-scrollbar__wrap {
          box-shadow: 0 5px 10px -10px rgba(0, 0, 0, 0.7) inset, 0 -5px 10px -10px rgba(0, 0, 0, 0.7) inset;
        }
      }
    }
    &.is-horizontal {
      :global {
        .el-scrollbar__wrap {
          overflow-x: auto;
        }
      }
    }
  }
</style>
